<template>
    <!-- el-row就是根级元素 -->
    <el-row class="login w100" type="flex" justify="end">
        <div class="content h100">
            <el-row class="h100" type="flex" justify="center" align="middle">
                <div class="form-content">
                    <h2 style="color: #489eff;">学生管理系统 | 登录</h2>

                    <!-- 表单根元素 -->

                    <!-- model=>必填项，收集整个表单所有的数据 -->
                    <!-- prop:接收每个输入框对应的校验 -->
                    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="80px"
                        label-position="top" hide-required-asterisk :disabled="loginFormDisabled">
                        <!-- 账号输入框 -->
                        <el-form-item prop="userName">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row">
                                    <span :class="['label', { active: loginFormActive.userName }]">账号</span>
                                    <span :class="['placeholder', { active: loginFormActive.userName }]"
                                        @click="handleLoginClick('userName')">账号</span>
                                </div>
                            </template>
                            <el-input ref="userNameRef" v-model="loginForm.userName" prefix-icon="el-icon-user"
                                @focus="handleLoginFocus('userName')" @blur="handleLoginBlur('userName')">
                            </el-input>
                        </el-form-item>

                        <!-- 密码输入框 -->
                        <el-form-item prop="password">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row">
                                    <span :class="['label', { active: loginFormActive.password }]">密码</span>
                                    <span :class="['placeholder', { active: loginFormActive.password }]"
                                        @click="handleLoginClick('password')">密码</span>
                                </div>
                            </template>
                            <el-input ref="passwordRef" v-model="loginForm.password" prefix-icon="el-icon-view"
                                @focus="handleLoginFocus('password')" @blur="handleLoginBlur('password')">
                            </el-input>
                        </el-form-item>

                        <!-- 验证码输入框 -->
                        <el-form-item prop="code">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row">
                                    <span :class="['label', { active: loginFormActive.code }]">验证码</span>
                                    <span :class="['placeholder', { active: loginFormActive.code }]"
                                        @click="handleLoginClick('code')">验证码</span>
                                </div>
                            </template>

                            <el-row type="flex" justify="space-between">
                                <el-input ref="codeRef" v-model="loginForm.code" prefix-icon="el-icon-picture"
                                    @focus="handleLoginFocus('code')" @blur="handleLoginBlur('code')">
                                </el-input>

                                <div v-html="captchaImageCode.captchaImage" @click="getCaptchaImage"></div>
                            </el-row>

                        </el-form-item>

                        <!-- 按钮 -->
                        <el-form-item>
                            <el-row type="flex" justify="space-between">
                                <el-button type="primary" @click="handleLogin">登录</el-button>
                                <div>没有账号？
                                    <el-button type="text">
                                        <router-link to="/register" tag="span">立即注册</router-link>
                                    </el-button>
                                </div>
                            </el-row>

                        </el-form-item>
                    </el-form>
                </div>
            </el-row>

        </div>


    </el-row>


</template>

<script>
import { setToken } from "@/utils/cookie.js"
import { captchaImage } from "@/api/common.js"
import { login } from "@/api/user.js"

export default {
    name: "Login",
    data() {
        return {
            //登录表单 undefined:浏览器发送接口会自动过滤掉值为undefined的参数
            loginForm: {
                userName: undefined,
                password: undefined,
                code: undefined,

            },

            //动态绑定
            loginFormActive: {
                userName: false,
                password: false,
                code: false,
            },

            //表单校验
            loginRules: {
                //校验字段要和绑定的表单字段一致
                userName: [{
                    //该输入框是必填项
                    required: true,
                    //提示语
                    message: "请输入用户名",
                    //触发校验的事件：失焦时触发
                    trigger: "blur",
                }],
                password: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur",
                }],
                code: [{
                    required: true,
                    message: "请输入验证码",
                    trigger: "blur",
                }],
            },

            //获取验证码，对象形式存储
            captchaImageCode: {},
        }

    },

    created() {

        this.getCaptchaImage()
    },
    methods: {

        //获取验证码
        getCaptchaImage() {
            captchaImage().then(res => {
                this.captchaImageCode = res.data
            })
        },


        /* 聚焦事件:通过字段控制 */
        handleLoginFocus(val) {
            this.loginFormActive[val] = true
        },

        /* 失焦事件 */
        handleLoginBlur(val) {
            //判断当前输入框是否有值 有值的话，不触发失焦事件
            if (this.loginForm[val]) return
            this.loginFormActive[val] = false
        },

        /* 实现点击input里的提示文字时也可以实现聚焦事件 */
        handleLoginClick(val) {
            this.$refs[`${val}Ref`].focus()
        },

        /* 点击登录 */
        handleLogin() {
            //当用户没有输入任何值时，对整个表单进行校验
            this.$refs['loginFormRef'].validate(valid => {
                console.log(valid);

                //没校验成功，直接return出去
                if (!valid) return

                //校验成功，实现登录
                //拿到uuid
                const { uuid } = this.captchaImageCode
                login({ ...this.loginForm, uuid })
                    .then(res => {
                        //提示成功
                        this.$message.success(res.msg)
                        //存储token
                        setToken(res.data.token)
                        this.loginFormDisabled=true
                        //登录成功后跳转页面
                        this.$router.push('/home')
                    }).catch(err => {
                        console.log(err);

                        //失败后更新验证码
                        this.getCaptchaImage()

                    })
            })
        }
    }
}

</script>


<style lang="scss" scoped>
.login {
    height: 100vh;
    min-height: 800px;
    background-image: url("http://mashang.eicp.vip:5557/student/v3/admin/img/login-bg.d7992b58.jpg");
    background-size: 100% auto;


    .content {
        width: 640px;
        background-color: white;
        border-radius: 50% 0 0 50%;

        .form-content {
            width: 300px;

            //修改elementUI样式：深度修改
            ::v-deep(.el-input__prefix) {
                height: 50% !important;
            }

            ::v-deep(.el-form-item__content) {
                line-height: 10px;
            }



            .label-row {
                position: relative;

                span {
                    display: inline-block;
                    //em:以1个字为单位
                    width: 3em;
                    transition: 0.5s;

                    &.label {
                        color: #9da0a5;
                        font-weight: bold;
                        opacity: 1;

                        //把原来的字体隐藏掉
                        &.active {
                            opacity: 0;
                        }
                    }

                    &.placeholder {
                        position: absolute;
                        top: 50px;
                        left: 35px;
                        color: #c4c5c8;
                        //z-index:值越大层级越高，解决层级叠加问题，input层级为1，设为2防止这个提示语被覆盖
                        z-index: 2;
                    }

                    //聚焦时，改变样式
                    &.active {
                        top: 0;
                        left: 0;
                        color: #409eff;
                        font-weight: bold;
                    }
                }

            }

        }

    }
}
</style>
